<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>疫情可视化</title>
    <script type="text/javascript" src="../static/js/jquery.js"></script>
    <script type="text/javascript" src="../static/js/echarts.min.js"></script>
    <script type="text/javascript" src="../static/js/china.js"></script>
    <script type="text/javascript" src="../static/js/c_map.js"></script>
    <script type="text/javascript" src="../static/js/map2.js"></script>
    <script type="text/javascript" src="../static/js/map3.js"></script>
    <script type="text/javascript" src="../static/js/ec.js"></script>
    <script type="text/javascript" src="../static/js/controller.js"></script>
    <link rel="stylesheet" href="../static/css/style.css">
</head>
<body>
<div class="head clearfix">
    <div class="title"><img src="../static/images/title1.png" alt="">
        <div class=".title_1"><img src="../static/images/title2.png" alt=""></div>
    </div>
    <div class="menu menu2">
        <ul>
            <li><a href="index.html">国内疫情</a></li>
            <li><a href="https://voice.baidu.com/act/newpneumonia/newpneumonia/?from=osari_aladin_banner#tab4">百度网</a>
            </li>
            <li><a href="https://xw.qq.com/act/qgfeiyan">腾讯网</a></li>
            <li><a href="http://www.nhc.gov.cn/xcs/xxgzbd/gzbd_index.shtml">卫健委</a></li>
        </ul>
    </div>
    <div class="time" id="showTime"></div>

</div>
<div class="mainbox">

    <ul class="clearfix nav1">
        <li style="width: 22%">
            <div class="box">
                <div class="tit">中高风险区分布</div>
                <div class="boxnav" id="echart5" style="height: 756px;">
                </div>
            </div>
        </li>
        <li style="width: 56%">
            <div class="box">
                <div class="tit">疫情详细数据</div>
                <div class="boxnav" style="height: 330px;">
                    <div class="yqlist">
                        <ul class="clearfix">
                            <li>
                                <div class="yq"></div>
                                <span>新增确诊</span>
                            </li>
                            <li>
                                <div class="yq"></div>
                                <span>新增本土</span>
                            </li>
                            <li>
                                <div class="yq"></div>
                                <span>新增境外</span>
                            </li>
                            <li>
                                <div class="yq"></div>
                                <span>新增无症状</span>
                            </li>
                            <li>
                                <div class="yq"></div>
                                <span>现有确诊</span>
                            </li>
                            <li>
                                <div class="yq"></div>
                                <span>现有本土</span>
                            </li>
                            <li>
                                <div class="yq"></div>
                                <span>现有境外</span>
                            </li>
                            <li>
                                <div class="yq"></div>
                                <span>现有无症状</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="box">
                <div class="tit">国内详情地图</div>
                <div class="head clearfix">
                    <div class="menu menu2">
                        <ul>
                            <li class="btnClass">
                                <a>新增确诊</a>
                            </li>
                            <li class="btnClass">
                                <a>现有确诊</a>
                            </li>
                            <li class="btnClass">
                                <a>累计确诊</a>
                            </li>
                        </ul>
                    </div>
                </div >
                <div class="boxnav mapc" style="height: 550px; position: relative ;overflow :hidden " id = "slect">
                    <div class = "map" id="c_map" ></div>
                    <div class = "map" id="c_map2" ></div>
                    <div class = "map" id="c_map3" ></div>
                 </div>
            </div>
            <div class="box">
                <div class="tit">国内新增趋势曲线图</div>
                <div class="boxnav" style="height: 250px;" id="echart3">
                </div>
            </div>
        </li>
        <li style="width: 22%">
            <div class="box">
                <div class="tit">本地、境外输入比例图</div>
                <div class="boxnav" id="echart4" style="height: 200px;">
                </div>
            </div>
            <div class="box">
                <div class="tit">新增确诊Top10</div>
                <div class="boxnav">
                    <div class="" style="height: 556px" id="echart2"></div>
                </div>
            </div>
        </li>
    </ul>
</div>
<script>
    var t = null;
    t = setTimeout(time, 1000); //開始运行
    function time() {
        clearTimeout(t); //清除定时器
        dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours(); //获取时
        var m = dt.getMinutes(); //获取分
        var s = dt.getSeconds(); //获取秒
        document.getElementById("showTime").innerHTML = y + "/" + mt + "/" + day + " " + h + ":" + m + ":" + s + "";
        t = setTimeout(time, 1000); //设定定时器，循环运行
    }
            $(function() {
            $(".btnClass").each(function() {
                var index = $(this).index();
                // 初始化
                $(".btnClass").eq(0)
                $(this).click(function() {
                    // 点击某个元素时，给这个元素添加active类，其余兄弟元素的active类都取消
                    $(this).siblings()
                    $("#slect > div").eq(index).stop(true).show().siblings().stop(true).hide();
                })
            })
        })
</script>

</body>
</html>
